import React from 'react'
import { useLoaderData } from 'react-router-dom'
import { chepiaoApi } from '../../api/index'
import { useSearchParams } from 'react-router-dom'
import Item from '../chepiao/crentonpon/Item'
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, List } from "antd-mobile";
import { useState } from 'react'
function Index() {
  const loader = useLoaderData()
  console.log(loader)
  const [sp] = useSearchParams()
  const nav = useNavigate()
  const [list, setList] = useState(loader.chepiao)
  const [page,setPage]= useState(1)
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    setPage(a => a + 1)
    const data = { ...Object.fromEntries(sp), page: page + 1 }
    console.log(data)
    const { data: res1 } = await chepiaoApi(data)
    console.log(res1)
    setList([...list, ...res1])
    if (res1.length === 0) {
      setHasMore(false)
    }
  }
  return (
    <div>
      <NavBar onBack={() => nav(-1)}>
        {sp.get("start") + "--" + sp.get("end")}
      </NavBar>
      {list.map((item, index) => {
        return <Item key={index} {...item}></Item>;
      })}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
    
  );
}

export default Index
export const loader = async ({ request }) => {
  console.log(request)
  const url = new URL(request.url)
  console.log(url)
  const sp = Object.fromEntries(url.searchParams.entries())
  console.log(sp)
  const { data: res } = await chepiaoApi(sp)
  console.log(res)
  return{chepiao:res}
  
}